<template>
  <div>
    <el-row>
      <el-col :span="15">
        <!--  -->
        <el-form
          :model="formData"
          ref="elForm"
          :rules="rules"
          class="form-body medias-image"
          label-width="160px"
          v-loading="loading"
        >
       
          <el-form-item label="物料名称：" prop="name">
            <el-input             
              v-model="formData.name"
              autocomplete="off"
              placeholder="请输入物料名称"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <el-form-item label="视频文件：" prop="video">
             <el-upload  v-loading="videoLoading"
                    class="upload-demo"
                    action="index.php?module=API&method=AdsPlace.transfile&format=json"
                    :show-file-list="false"
                    :on-success="handleVideoChange"
                    :before-upload="beforeVideoUpload"
                    :on-error="onVideoUploadError"
                     accept=".mp4,.flv,.mkv"
                    >
                    <el-button type="primary" icon="el-icon-upload" size="mini"
                        >点击上传</el-button
                    >
                    <label >支持视频格式:支持mp4,flv等格式</label>
                    
                    </el-upload>
                    <!-- 上传图片结果显示url -->
                  <div v-if="formData.video" class="word-break">
                      <a> {{formData.video}} </a></div>
  
          </el-form-item>
          <!--  -->
          <el-form-item label="尺寸：" prop="width">
            <div>
              <div>
                <span>宽度：</span>
                <el-input
                  v-model="formData.width"
                  autocomplete="off"                 
                  :style="{ width: '20%' }"
                ></el-input>
                <span class="in_picturePx1"> px</span>
                <span class="in_picture">高度：</span>
                <el-input
                  v-model="formData.height"
                  autocomplete="off"                  
                  :style="{ width: '20%' }"
                ></el-input>
                <span class="in_picturePx2"> px</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="视频时长：" prop="videotimeline">
            <el-input
              v-model="formData.videotimeline"
              autocomplete="off"
              placeholder=""
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          
          <!--  -->
          <el-form-item label="展现监控链接：" prop="trackurl">
            <el-input
              v-model="formData.trackurl"
              placeholder="请输入展现监控链接"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <!--  -->
          <!--  -->
          <el-form-item size="large" class="form-submit-panel">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">关闭</el-button>
          </el-form-item>
          <!--  -->
        </el-form>
        <!--  -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['mediasRow'],
  data() {
    return {
      formData: {
        id: 0,
        type:"video",
        name: "",
        video: "", // 视频的url
        width: "",
        height: "",
        videotimeline: 0,
        linkurl: "",
        target: 1,
        trackurl: "",
      },
      loading: false, // 提交表单时loading 效果
      videoLoading: false, //上传视频时loading 效果；
      targetOptions: [
        {
          label: "新窗口",
          value: 1,
        },
        {
          label: "原窗口",
          value: 2,
        },
      ],
      rules: {
        name: [
          {
            required: true,
            message: "物料名称不能为空",
            trigger: "change",
          },
        ],
        video: [
          {
            required: true,
            message: "请上传视频文件",
            trigger: "change",
          },
        ],
        width: [
          {
            required: true,
            message: "请填写宽高",
            trigger: "change",
          },
        ],
          height: [
          {
            required: true,
            message: "请填写宽高",
            trigger: "change",
          },
        ],
        target: [
          {
            required: true,
            message: "目标窗口不能为空",
            trigger: "change",
          },
        ],
        trackurl: [],
      },
    };
  },
  created(){
       if(!this.row  || !this.row.hasOwnProperty("id")){ return;}

      // console.log(this.row)
      // 修改是不是被类型的数据不渲染
      if(this.row.type != 'video') { return; }
      // 
      if(this.row.content){        
        this.row['video'] = this.row.content.video ;
      }
    //  
      for(var key in this.formData){
         if( this.row[key]){
              this.formData[key] = this.row[key];
         }
       }

       //初始化一些选项
      // this.formData.type = 'video';
     
  },
  computed:{
    // 监控外部属性传递进来的数据 变化了可以重新赋值
    row: function(){       
       return this.mediasRow
     }
  },
  methods: {
       // 上传 Video 素材
    handleVideoChange(response, file, fileList){
        this.formData.video = response.data;
        this.videoLoading = false;
    },
    beforeVideoUpload(file ){
      this.videoLoading=true;
    },
    onVideoUploadError(err, file, fileList){
      this.videoLoading = false;
      this.$message({message:"上传失败", type:"error"})
    },
    // 
    submitForm() {
      // 提交表单处理 先 验证，通过后提交到接口
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        this.loading = true;
        // TODO 提交表单
        // console.log(this.formData)
        //  提交数据到接口，更新和新建通过 formData.id > 0 来区别
         PlaceAPI.createMedias(this.formData).then((data)=>{
            this.loading = false;
            this.$message({ message: data.msg, type: "success" });
            // 触发关闭Drawer 侧滑层 关闭
            this.formData.id = data.value;
            // 添加成功返回 data.vaule = 物料id；
            this.$emit("onclosedrawer",{ from: 'submit',row: this.formData })
         })

      });
    },
    resetForm() {
       this.$emit("onclosedrawer",{ from: ''})
    },
  },
};
</script>
